/**
 * src/pages/index/index.tsx
 * ------------------------------------
 * 应用首页组件
 * 1. 提供用户身份选择（厨师/客人）
 * 2. 支持微信登录和快速登录两种方式
 * 3. 登录后自动加载数据并跳转到对应页面
 * 4. 处理云端数据加载失败的回退机制
 * 该页面是用户进入应用的第一个页面，负责用户身份验证和数据初始化
 * 创建日期：2025-08-06
 */
import { View, Text, Button, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useAppContext } from '../../store'
import { CloudDataManager } from '../../utils/cloud'
import { wechatUtils } from '../../utils/wechat'
import { DEFAULT_DISHES, DEFAULT_CATEGORIES, DEFAULT_USERS } from '../../utils'
import './index.scss'

/**
 * 应用首页组件
 * 提供用户登录和身份选择功能
 */
export default function Index() {
  const { state, dispatch } = useAppContext()

  /**
   * 处理微信登录
   * 通过微信API获取用户信息，然后加载云端数据
   * @param role - 用户角色：'chef' | 'guest'
   */
  const handleWechatLogin = async (role: 'chef' | 'guest') => {
    try {
      Taro.showLoading({ title: '登录中...' })
      
      // 导入数据管理器
      const { DataManager } = await import('../../utils/index')
      
      // 执行微信登录获取用户信息
      const user = await wechatUtils.fullLogin(role)
      
      // 更新用户状态
      dispatch({ type: 'SET_USER', payload: user })
      
      // 保存用户数据到本地
      DataManager.saveUser(user)
      
      try {
        // 从云数据库加载数据
        const dishes = await CloudDataManager.getDishes()
        const categories = await CloudDataManager.getCategories()
        const orders = await CloudDataManager.getOrders()
        
        // 更新全局状态
        dispatch({ type: 'SET_DISHES', payload: dishes })
        dispatch({ type: 'SET_CATEGORIES', payload: categories })
        dispatch({ type: 'SET_ORDERS', payload: orders })
        
        // 保存到本地存储
        DataManager.saveDishes(dishes)
        DataManager.saveCategories(categories)
        
        console.log('云端数据加载成功')
      } catch (error) {
        console.error('云端数据加载失败，使用默认数据:', error)
        
        // 如果云数据加载失败，使用默认数据
        // 保存默认数据到本地存储
        DataManager.saveDishes(DEFAULT_DISHES)
        DataManager.saveCategories(DEFAULT_CATEGORIES)
        
        // 更新全局状态
        dispatch({ type: 'SET_DISHES', payload: DEFAULT_DISHES })
        dispatch({ type: 'SET_CATEGORIES', payload: DEFAULT_CATEGORIES })
        dispatch({ type: 'SET_ORDERS', payload: [] })
      }
      
      Taro.hideLoading()
      Taro.showToast({ title: '登录成功', icon: 'success' })
      
      // 跳转到对应页面
      if (role === 'chef') {
        Taro.navigateTo({ url: '/pages/chef/dashboard/index' })
      } else {
        Taro.navigateTo({ url: '/pages/guest/menu/index' })
      }
    } catch (error) {
      Taro.hideLoading()
      Taro.showToast({ 
        title: '登录失败，请重试', 
        icon: 'error' 
      })
      console.error('微信登录失败:', error)
    }
  }

  /**
   * 快速登录（使用本地数据）
   * 不依赖微信登录，直接使用预设用户数据
   * @param role - 用户角色：'chef' | 'guest'
   */
  const handleQuickLogin = async (role: 'chef' | 'guest') => {
    try {
      Taro.showLoading({ title: '登录中...' })
      
      // 导入数据管理器
      const { DataManager } = await import('../../utils/index')
      
      // 选择用户
      const targetUser = DEFAULT_USERS.find(user => user.role === role)
      
      if (targetUser) {
        // 保存用户数据到本地
        DataManager.saveUser(targetUser)
        
        // 更新用户状态
        dispatch({ type: 'SET_USER', payload: targetUser })
        
        // 保存默认数据到本地存储
        DataManager.saveDishes(DEFAULT_DISHES)
        DataManager.saveCategories(DEFAULT_CATEGORIES)
        
        // 更新全局状态
        dispatch({ type: 'SET_DISHES', payload: DEFAULT_DISHES })
        dispatch({ type: 'SET_CATEGORIES', payload: DEFAULT_CATEGORIES })
        dispatch({ type: 'SET_ORDERS', payload: [] })
        
        Taro.hideLoading()
        
        // 跳转到对应页面
        if (role === 'chef') {
          Taro.navigateTo({ url: '/pages/chef/dashboard/index' })
        } else {
          Taro.navigateTo({ url: '/pages/guest/menu/index' })
        }
      } else {
        Taro.hideLoading()
        Taro.showToast({ 
          title: '用户不存在', 
          icon: 'error' 
        })
      }
    } catch (error) {
      Taro.hideLoading()
      Taro.showToast({ 
        title: '登录失败，请重试', 
        icon: 'error' 
      })
      console.error('快速登录失败:', error)
    }
  }

  return (
    <View className='index'>
      <View className='header'>
        <Text className='title'>家庭点餐系统</Text>
        <Text className='subtitle'>欢迎使用家庭点餐系统</Text>
      </View>
      
      {state.currentUser ? (
        <View className='user-info'>
          <Text className='welcome-text'>欢迎回来，{state.currentUser.name}！</Text>
          <Text className='role-text'>当前角色：{state.currentUser.role === 'chef' ? '主厨' : '客人'}</Text>
          <Button 
            className='continue-btn' 
            onClick={() => {
              if (state.currentUser?.role === 'chef') {
                Taro.navigateTo({ url: '/pages/chef/dashboard/index' })
              } else {
                Taro.navigateTo({ url: '/pages/guest/menu/index' })
              }
            }}
          >
            继续使用
          </Button>
          <Button 
            className='logout-btn' 
            onClick={() => dispatch({ type: 'LOGOUT' })}
          >
            切换账号
          </Button>
        </View>
      ) : (
        <View className='role-selection'>
          <Text className='section-title'>请选择您的角色</Text>
          
          <View className='role-cards'>
            <View className='role-card chef'>
              <View className='role-icon'>👨‍🍳</View>
              <Text className='role-name'>主厨</Text>
              <Text className='role-desc'>管理菜品、处理订单、分配积分</Text>
              <View className='login-buttons'>
                <Button 
                  className='wechat-login-btn' 
                  onClick={() => handleWechatLogin('chef')}
                >
                  微信登录
                </Button>
                <Button 
                  className='quick-login-btn' 
                  onClick={() => handleQuickLogin('chef')}
                >
                  快速体验
                </Button>
              </View>
            </View>
            
            <View className='role-card guest'>
              <View className='role-icon'>👤</View>
              <Text className='role-name'>客人</Text>
              <Text className='role-desc'>浏览菜品、下单、使用积分</Text>
              <View className='login-buttons'>
                <Button 
                  className='wechat-login-btn' 
                  onClick={() => handleWechatLogin('guest')}
                >
                  微信登录
                </Button>
                <Button 
                  className='quick-login-btn' 
                  onClick={() => handleQuickLogin('guest')}
                >
                  快速体验
                </Button>
              </View>
            </View>
          </View>
        </View>
      )}
      
      <View className='footer'>
        <Text className='footer-text'>
          {state.currentUser ? '已登录，可以继续使用系统' : '选择角色开始使用系统'}
        </Text>
      </View>
    </View>
  )
}
